<!-- components/layout-container.vue -->
<template>
  <!-- 页面容器 -->
  <view class="layout-container" :style="containerStyle">
    <!-- 顶部导航栏（APP和小程序不同表现） -->
    <view v-if="showNavBar" class="nav-bar" :style="navBarStyle">
      <!-- 返回按钮 -->
      <view v-if="showBack" class="nav-back" @click="handleBack">
        <slot name="back-icon">
          <image class="back-icon" src="/static/back.png" mode="aspectFit"/>
        </slot>
      </view>
      <!-- 标题 -->
      <text class="nav-title">{{ title }}</text>
    </view>

    <!-- 页面内容区域 -->
    <view class="content-wrapper" :style="contentStyle">
      <slot></slot>
    </view>

    <!-- 底部安全区域 -->
    <view v-if="safeAreaInsetBottom" class="safe-area-bottom"/>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 组件属性
const props = defineProps({
  title: { type: String, default: '默认标题' },      // 导航栏标题
  showBack: { type: Boolean, default: false },      // 显示返回按钮
  safeAreaInsetBottom: { type: Boolean, default: true }, // 底部安全区域
  navBarHeight: { type: Number, default: 44 },       // 导航栏高度
  statusBarHeight: { type: Number },                 // 状态栏高度
});

// 响应式状态
const systemInfo = ref(null);
const isAPP = ref(process.env.VUE_APP_PLATFORM === 'APP');

// 计算容器样式
const containerStyle = computed(() => ({
  paddingTop: props.safeAreaInsetTop ? `${statusBarHeight.value}px` : '0'
}));

// 导航栏样式
const navBarStyle = computed(() => ({
  height: `${props.navBarHeight}px`,
  paddingTop: `${statusBarHeight.value}px`
}));

// 内容区域样式
const contentStyle = computed(() => ({
  paddingBottom: props.safeAreaInsetBottom ? 'env(safe-area-inset-bottom)' : '0'
}));

// 获取系统信息
onMounted(async () => {
  systemInfo.value = await uni.getSystemInfoSync();
});

// 动态获取状态栏高度
const statusBarHeight = computed(() => 
  props.statusBarHeight || systemInfo.value?.statusBarHeight || 0
);

// 返回按钮处理
const handleBack = () => {
  uni.navigateBack({ delta: 1 });
};

// 页面加载时处理平台差异
onLoad(() => {
  if (isAPP.value) {
    // APP端隐藏原生导航栏
    uni.hideNavigationBar();
  }
});
</script>

<style scoped lang="scss">
.layout-container {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
}

.nav-bar {
  position: relative;
  width: 100%;
  background: #ffffff;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);

  .nav-back {
    padding: 0 20rpx;
    height: 100%;
    display: flex;
    align-items: center;
    
    .back-icon {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    color: #333;
  }
}

.content-wrapper {
  flex: 1;
  padding: 20rpx;
  box-sizing: border-box;
}

.safe-area-bottom {
  height: env(safe-area-inset-bottom);
  background-color: #fff;
}

/* 小程序端样式调整 */
@media (max-width: 768px) {
  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
  }

  .content-wrapper {
    padding-top: calc(v-bind('props.navBarHeight + statusBarHeight') * 1px + 20rpx);
  }
}
</style>